<template>
  <a-drawer title="移库详情页" v-model:visible="state.showDrawer" class="custom-class" style="" width="80%" placement="right" @close="emits('update:showDrawer', false)">
    <div id="print-block">
      <h1 style="display: flex; width: 100%; justify-content: center; font-size: 24px; font-width: 700">移库单</h1>
      <a-row style="font-size: 15px; font-width: 700; margin-bottom: 10px">
        <a-col :span="8"> 移库单号 : {{ state.commonOpt.batchNo }} </a-col>
        <a-col :span="8"> 移库人 : {{ state.commonOpt.stockUserName }} </a-col>
        <a-col :span="8"> 移库日期 : {{ state.commonOpt.createTime }}</a-col>
      </a-row>
      <vxe-table :export-config="{}" ref="tableRef" style="width: 100%; overflow-y: visible" border max-height="450" :data="state.details" align="center">
        <vxe-column type="seq" title="序号" width="100"></vxe-column>
        <vxe-column field="type" title="样本类型" width="100">
          <template #default="{ row }">
            {{ row.type == 3 ? '暂存样本' : '保藏样本' }}
          </template>
        </vxe-column>
        <vxe-column field="serial" title="序列号" width="200"></vxe-column>
        <vxe-column field="projectName" title="课题组" width="150"></vxe-column>
        <vxe-column field="originalStorageDesp" title="原始存储位置"></vxe-column>
        <vxe-column field="storageDesp" title="目标存储位置"></vxe-column>
      </vxe-table>
    </div>
    <div style="display: flex; justify-content: center; background-color: #fff; margin: 20px 0">
      <Popconfirm title="是否确认导出？" @confirm="exportExcelFn">
        <Button type="primary">Excel导出</Button>
      </Popconfirm>
      <a-button style="margin-left: 20px" type="primary" @click="print">打印</a-button>
    </div>
  </a-drawer>
</template>

<script setup lang="ts">
import { Button, Popconfirm } from 'ant-design-vue';
import { reactive, ref, watch } from 'vue';
import { journalShow } from '@/modules/Sample-transfer/api';
import Print from 'print-js';

const props = defineProps<{
  id;
  showDrawer: boolean;
}>();
const emits = defineEmits<{
  (e: 'update:showDrawer', state: boolean);
}>();
const state: {
  commonOpt: any;
  details: any;
  showHighCamera: boolean;
  showDrawer: boolean;
} = reactive({
  data: {},
  details: {},
  showHighCamera: false,
  showDrawer: false,
});
const tableRef = ref();

const getData = async () => {
  let { result } = await journalShow(props.id);
  state.details = result.details;
  state.commonOpt = result.commonOpt;
  state.showDrawer = true;
};

const exportExcelFn = () => {
  tableRef.value?.openExport();
};
const print = () => {
  Print({
    printable: 'print-block',
    type: 'html',
    header: '移库单',
    headerStyle: 'font-weight:400;text-align:center;margin:50px 0',
    maxWidth: 1500,
    targetStyles: ['*'], // 允许打印所有样式属性
  });
};

watch(
  () => props.showDrawer,
  async (newValue) => {
    if (!newValue) return;
    await getData();
  },
);
</script>

<style scoped></style>
